<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${webConfig.name}</title>
    <meta name="keywords" content="${webConfig.keyword}">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/index.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=18997a286e73c2d94837b10f89516387"></script>
</head>
<style>
.weui-cells{
    top:-20px
}
.weui-cell{
    padding: 10px 20px
}
.xyg-map-content {
    height: auto;
    width: 90%;
    margin: 0.5rem 5%;
}
.xyg-map-content .mapContent {
    height: 10rem;
    width: 100%;
}
.amap-icon img {
    width: 25px;
    height: 34px;
}
 .search_input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ffffff;
}
.search_input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
}
.search_input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ffffff;
}
.search_input::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ffffff;

}

    /****字体开始*****/
    .xyg-content-desc{width: 100%;height: auto; background: #ffffff; padding-top:10px;}
    .xyg-content-desc .xyg-content-desc-content{width: 96%; margin-left: 2%; min-height: 400px;}
    .sidebar-wrapper { position: relative; height: 100%; overflow: auto;}
    #sucaihuo { background-color: #4bb19f;}
    #sucaihuo .nav { margin-top: 20px; padding-left: 20px; line-height: 40px; list-style-type: none;}
    #sucaihuo .nav a { display: block; font: 100 16px/40px '微软雅黑'; color: #f7f7f7; text-decoration: none;}
    #sucaihuo .nav a:hover { background-color: #4bb19f;}
    [data-simplersidebar='active'] { box-shadow: 3px 0px 3px 0px rgba(0, 0, 0, 0.5);}
    .inm2_tab1 img{width: 203px; height: 130px;}
    .inm3_le img{width: 170px; height: 160px;}
</style>
<body>
<div class="sidebar" id="sucaihuo">
    <div class="sidebar-wrapper" id="sidebar-wrapper">
        <ul class="nav">
            <#list navigationList as navigation>
                <li><a href="${navigation.url}">${navigation.name}</a></li>
            </#list>
        </ul>
    </div>
</div>
<div style="background: #ffffff; position: fixed; left: 0px; top: 0px;border-bottom: 1px solid #f4f4f4;height: 2.5rem; z-index: 999; width: 100%;">
    <div style="width: 15%; float: left;">
        <img id="menu" src="${s.base}/mobile/img/147.png" style="height: 1.5rem;padding: 0.5rem 0px 0.5rem 0.3rem;">
    </div>
    <div style="width: 70%;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: auto; text-align: center; float: left;line-height: 2.5rem;font-size: 16px;">
        联系我们
    </div>
    <div style="width: 15%; height: auto; text-align: right;  float: left;">
    </div>
    <div style="clear: both;"></div>
</div>
<div style="width: 100%; height: 2.5rem;"></div>
<div id="swiper" class="swiper-container" data-pagination='.swiper-pagination' data-autoplay="1000">
    <div class="swiper-wrapper">
        <#list bannerList as banner>
            <div class="swiper-slide">
                <a href="${banner.url!'javascript:void(0)'}"><img style="width:100%;height: 175px" src="${banner.image}"/></a>
            </div>
        </#list>
    </div>
</div>
    <div class="cont_us" style="margin-top: 0.5rem;">
        <p class="title_font_d">联系我们</p>
        <p class="title_font_d">contact us</p>
    </div>
<#if webConfig.latitude??&&webConfig.longitude??>
    <div class="xyg-map-content" >
        <div id="container_map" class="mapContent" onclick="test()">
            <input type="hidden" id="longitude" value="${webConfig.longitude}">
            <input type="hidden" id="latitude" value="${webConfig.latitude}">
            <input type="hidden" id="hostName" value="${webConfig.name}">
            <input type="hidden" id="hostAddress" value="${webConfig.address}">
        </div>
    </div>
</#if>
    <div class="cont_us" style="align-items: flex-start;margin-top: 20px;margin-left: 20px">
        <p>电话：（86）18420023724  内地 <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（852）97631220 香港</p>
        <#if webConfig.qq??>
        <p>QQ：${webConfig.qq}</p>
        </#if>
        <p>地址：${webConfig.address}</p>
    </div>
    <!--<div class="input_text">
        <input class="weui-input" style="background-color: #EDEDED; width: 48%; margin-right: 2%; " type="text" id="title" placeholder="留言标题">
        <input class="weui-input" style="background-color: #EDEDED;width: 48%; margin-left: 2%;" type="text" id="email" placeholder="留言邮箱">
    </div>-->
    <div class="weui-cells weui-cells_form" style="border-top: 0px;">
        <div class="weui-cell">
            <div class="weui-cell__bd">
            <textarea class="weui-textarea search_input" style="background-color: #EDEDED;color: #eee;"  id="content" placeholder=" 留言内容" rows="3"></textarea>
            </div>
        </div>
    </div>
    <div class="input_text" style="margin-top:-20px">
        <input class="weui-input search_input" style="background-color: #EDEDED;color: #eee; width: 65%;"  type="text" id="yzm" style="width: 62% !important;height: 32px;" placeholder="验证码">
        <div id="yzmContent"> </div>
    </div>
    <div class="foot_p">
        <button type="button" id="submitBtn" >提交</button>
    </div>

<div style="width:100%;height:65px">

</div>
<div id="tarBar">
    <div class="tarbarFont " onclick="goHomePage()">
        <img src="${s.base}/mobile/img/icon_1_1.png" alt="">
        <p>首页</p>
    </div>
    <div class="tarbarFont active" onclick="goLinkMe()">
        <img src="${s.base}/mobile/img/icon_3_2.png?75411" alt="">
        <p>咨询我们</p>
    </div>
    <div class="tarbarFont" onclick="goProduct()">
        <img src="${s.base}/mobile/newimages/yijia_0712.png?1254" style="width: 35px; height: 35px; padding-bottom: 2px;" alt="">
        <p>线上预约</p>
    </div>
    <!--
    <div class="tarbarFont" onclick="goLinkMe()">
        <img src="${s.base}/mobile/img/icon_4_1.png" alt="">
        <p>联系我们</p>
    </div>  -->
</div>
</body>
</html>
<!-- body 最后 -->
<script src="${s.base}/mobile/js/jquery.min.js"></script>
<script src="${s.base}/mobile/js/jquery-weui.min.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="${s.base}/mobile/js/swiper.min.js"></script>
<script src="${s.base}/mobile/js/city-picker.min.js"></script>
<script src="${s.base}/mobile/js/base.js"></script>
<script  type="application/javascript" src="${s.base}/js/base/gVerify.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/simpler-sidebar.min.js"></script>
<script src="${s.base}/mobile/newjs/window_port.js"></script>
<script>
    $(function() {
        $('#sucaihuo').simplerSidebar({
            opener: '#menu',
            sidebar: {
                align: 'left',
                width: 200
            }
        });
    });
</script>
<script type="text/javascript">
    $(".swiper-container").swiper();
    var verifyCode = new GVerify("yzmContent");//初始化验证码


    $(document).ready(function(e) {
        var longitude = $("#longitude").val();
        var latitude = $("#latitude").val();
        if(longitude!=null&&latitude!=null){
            setContent("container_map",longitude*1,latitude*1);
        }
    });

    function test() {
        var longitude = $("#longitude").val();
        var latitude = $("#latitude").val();
        var hostName = $("#hostName").val();
        var hostAddress = $("#hostAddress").val();
       /* wx.openLocation({
            latitude:latitude*1, // 纬度，浮点数，范围为90 ~ -90
            longitude:longitude*1, // 经度，浮点数，范围为180 ~ -180。
            name: hostName, // 位置名
            address:hostAddress, // 地址详情说明
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });*/
    }
    function setContent(id,jd,wd){
        var map = new AMap.Map(id, {
            resizeEnable: true,
            center: [jd, wd],
            zoom: 18
        });
        var marker = new AMap.Marker({
            position: map.getCenter(),
            icon: '${s.base}/mobile/newimages/poi-marker-default.png',
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        /*marker.setLabel({
         //修改label相对于maker的位置
         offset: new AMap.Pixel(20, 20),
         content: "<div class='info'>联系人:"+name+"<br/>联系电话:"+phone+"</div>"
         });*/
    }
    $("#submitBtn").on("click",function(){
        var yzm = $("#yzm").val();

        var title = $("#title").val();
        /*if(title == null || title == "") {
            $.toast("请输入留言标题", "text");
            return false;
        }*/

        var email = $("#email").val();
        /*if(email == null || email == "") {
            $.toast("请输入留言邮箱", "text");
            return false;
        }*/
        var content = $("#content").val();
        if(content == null || content == "") {
            $.toast("请输入留言内容", "text");
            return false;
        }
        if(yzm == null || yzm == "") {
            $.toast("请输入验证码", "text");
            return false;
        }
        var res = verifyCode.validate(yzm);
        if(!res){
            $.toast("验证码输入错误！", "text");
            return false;
        }
        var param = {title:title,email:email,content:content};
        $.showLoading("正在提交中");
        $.post("/phone/webMessage",param,function(result){
            if(1==result.returnInfo.state){
                $.hideLoading();
                $.alert("您已提交成功，我们会尽快处理！", function() {
                    //点击确认后的回调函数
                    window.location.reload();
                });

            }else{
                $.hideLoading();
                $.toast("提交失败", "text");
            }
        },"json");
    });


</script>